<template>
  <div class="section-attribute-info-content">
    <div class="mt-2" v-for="message in areaMessageList">{{ message }}</div>

    <div class="mt-2">
      {{ $t('message.SectionAttributeTool.' + sectionAttributeInfo.BaryCenter.name) + ':' }}
      {{ '(' + sectionAttributeInfo.BaryCenter.unit + ')' }}
    </div>
    <div v-for="message in baryCenterMessageList" class="pl-4">{{ message }}</div>
    <div class="mt-2" v-for="message in polarIneriaMessageList">{{ message }}</div>
    <div class="mt-2">
      {{ $t('message.SectionAttributeTool.AreaInertia') }}
      {{ `( ${sectionAttributeInfo.AreaInertia.unit} )` }}
    </div>
    <div v-for="message in areaInertiaMessageList" class="pl-4">{{ message }}</div>
    <div class="mt-2" v-for="message in productIneriaMessageList">{{ message }}</div>
    <div class="mt-2">
      {{ $t('message.SectionAttributeTool.RadiusInertia') }}
      {{ `( ${sectionAttributeInfo.RadiusInertia.unit} )` }}
    </div>
    <div v-for="message in radiusInertiaMessageList" class="pl-4">{{ message }}</div>
  </div>
</template>

<script>


export default {
  name: "SectionAttributeInfoContent",
  props: {
    sectionAttributeInfo: null,
  },
  methods: {
    attributeValue(item) {
      let value = item.value;
      let unit = item.unit;
      return value + unit
    },
  },
  computed: {
    areaMessageList() {
      let list = [];
      ['Area'].forEach(item => {
        list.push(this.$t('message.SectionAttributeTool.' + this.sectionAttributeInfo[item].name) + ' = ' + this.attributeValue(this.sectionAttributeInfo[item]))
      })
      return list
    },

    polarIneriaMessageList() {
      let list = [];
      ['PolarIneria'].forEach(item => {
        list.push(this.$t('message.SectionAttributeTool.' + this.sectionAttributeInfo[item].name) + ' = ' + this.attributeValue(this.sectionAttributeInfo[item]))
      })
      return list
    },

    baryCenterMessageList() {
      let list = [];
      ['x', 'y', 'z'].forEach(item => {
        list.push(this.$t('message.SectionAttributeTool.' + this.sectionAttributeInfo.BaryCenter[item].name) + ' = ' + this.sectionAttributeInfo.BaryCenter[item].value)
      })
      return list
    },

    areaInertiaMessageList() {
      let list = [];
      ['Iy', 'Iz'].forEach(item => {
        list.push(`${item} = ` + this.sectionAttributeInfo.AreaInertia.value[item])
      })
      return list
    },

    radiusInertiaMessageList() {
      let list = [];
      ['iy', 'iz'].forEach(item => {
        list.push(`${item} = ` + this.sectionAttributeInfo.RadiusInertia.value[item])
      })
      return list
    },

    prouductIneriaMessageList() {
      let list = [];
      ['Lxx', 'Lxy', 'Lxz', 'Lyx', 'Lyy', 'Lyz', 'Lzx', 'Lzy', 'Lzz',].forEach(item => {
        list.push(`${item} = ` + this.sectionAttributeInfo.ProuductIneria.value[item])
      })
      return list;
    },

    productIneriaMessageList() {
      let list = [];
      ['ProductIneria'].forEach(item => {
        list.push(this.$t('message.SectionAttributeTool.' + this.sectionAttributeInfo[item].name) + ' = ' + this.attributeValue(this.sectionAttributeInfo[item]))
      })
      return list
    },

  },
}
</script>
<style scoped>
.section-attribute-info-content div {
  padding-left: 5px;
  padding-right: 5px;
  width: 100%;
}
</style>
